---
import Card from '../components/Card.jsx';
import BaseHead from '../components/BaseHead.astro';
import MainLayout from '../components/MainLayout.astro';

// When testing, we used this as a bit of a kitchen sink for Astro.
// Keep the different mixing of frameworks just for fun, to show Astro off.
import CompanyLogo from '../components/CompanyLogo.jsx';
import NewsAssets from '../components/NewsAssets.svelte';
import NewsTitle from '../components/NewsTitle.vue';

// Using Snowpack? Want to be featured on snowpack.dev?
// Add your project, organization, or company to the end of this list!
import news from '../data/news.json';
import users from '../data/users.json';

const title = 'Community & News';
const description = 'Snowpack community news and companies that use Snowpack.';
---

<!doctype html>
<html>

<head>
  <BaseHead title={title} description={description} permalink="TODO" />
</head>

<body>
  <MainLayout>
    <NewsTitle title={title} />
    <p>
      Get the latest news, blog posts, and tutorials on Snowpack. <a href="/feed.xml">Also available via RSS.</a>
    </p>

    <p>
      Got something that you think we should feature?
      <a href="https://github.com/FredKSchott/snowpack/discussions/categories/ideas">Submit it!</a>
    </p>

    <div class="card-grid card-grid-3">
      {news.reverse().map((item: any) => <Card item={item} />)}
    </div>

    <div class="content">

      <h3>Who's Using Snowpack?</h3>

      <div class="company-logos">

        {users.map((user) =>
        <CompanyLogo user={user} />)}

        <a href="https://github.com/FredKSchott/snowpack/edit/main/www/_template/news.md" target="_blank"
          title="Add Your Project/Company!" class="add-company-button">
          <svg style="height: 22px; margin-right: 8px;" aria-hidden="true" focusable="false" data-prefix="fas"
            data-icon="plus" class="company-logo" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
            <path fill="currentColor"
              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z">
            </path>
          </svg>
          Add your logo
        </a>
      </div>

      <NewsAssets />
    </div>
  </MainLayout>
</body>

</html>
